<template>
	<view>
		<view class="check-img">
			<img src="@/static/img1.jpg" alt="" style="width: 100%; height: 100%;">
		</view>
	<!-- 	<view class="check-choose" @click="timeShowBtn">
			<view>{{timeChoose}}</view>
			<view class="">
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
		</view> -->
		<u-select v-model="timeShow" :list="timeList" @confirm="confirm"></u-select>

		<view class="check-title">
			<view class="ct-name">{{courseName}}</view>
			<view class="ct-num">共计 <text style="color: red;letter-spacing: 6rpx;">{{totalNum}}</text> 条记录</view>
		</view>

		<view class="check-container">
			<view class="check-content" v-for="(item,index) in checkList" :key="index">
		<!-- 		<view class="cc-left">
					<view class="cl-time">
					   <text style="font-weight: bold;">2023/11/16</text><text decode>{{'&nbsp;&nbsp; 周一18：00-20：00'}}</text>
					</view>
					<view class="cl-subject">上课主题：--</view>
					<view class="cl-subject">课堂表现：<u-rate :count="count" v-model="item.classPerformance" :disabled="true"></u-rate></view>
				</view> -->
            <view class="cc-right">
				<view class="cr-arr" v-if="item.status === 0">
					待签到
				</view>
				<view class="cr-arr" v-if="item.status === 2">
					已到
				</view>
				<view class="cr-arr" v-if="item.status === 4">
					请假
				</view>
				<view class="cr-arr" v-if="item.status === 6">
					旷课
				</view>
				<view class="cr-time">消耗{{item.hour}}课时</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCourseSalesDetailsList} from '@/utils/api.js'
	export default {
		data() {
			return {
				timeShow: false,
				timeChoose: '全部',
				timeChooseId: 'all',
				timeList: [{
						value: 'all',
						label: '全部'
					},
					{
						value: '1',
						label: '最近一个月'
					},
					{
						value: '2',
						label: '最近两个月'
					},
					{
						value: '3',
						label: '最近三个月'
					},
					{
						value: '6',
						label: '最近半年'
					},
				],
				checkList: [],
				traineeId:'',
				totalNum:0,
				courseName:'',
				count:4
			}
		},
		methods: {
			confirm(e) {
				this.timeChoose = e[0].label
				this.timeChooseId = e[0].value
			},
			timeShowBtn() {
				this.timeShow = true
			},
			async getCourseSalesDetailsList() {
				uni.showLoading()
				const data = {
					pageSize:999,
					pageNum:1,
					traineeCourseId:this.traineeId
				}
				const {total,code,rows} = await getCourseSalesDetailsList(data)
				if (code == 200) {
					uni.hideLoading()
					this.totalNum = total
					this.checkList = res.rows
				}
				
			},
		},
		onLoad(options){
			this.traineeId = options.id
			console.log("1111: " + options.id);
			this.courseName= options.courseName
			this.getCourseSalesDetailsList()
		}
	}
</script>

<style>
	.check-choose {
		display: flex;
		justify-content: space-between;
		width: 280rpx;
		background-color: #292828;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 10rpx;
		border-radius: 40rpx;
		position: absolute;
		top: 40rpx;
		left: 20rpx;
		opacity: 0.8;
	}

	.check-title {
		display: flex;
		position: absolute;
		top: 130rpx;
		left: 20rpx;
		color: #fff;
	}

	.ct-name {
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.ct-num {
		margin-left: 20rpx;
		margin-top: 8rpx;
	}

	.check-container{
		position: absolute;
		top: 200rpx;
		width: 100%;
	}
	.check-content{
		width: 94%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}
	.cl-subject{
		color: #979595;
		font-size: 30rpx;
		margin:5rpx 0;
	}
	.cr-arr{
		text-align: right;
		color: #55ff00;
	}
	.cr-time{
		margin-top: 10rpx;
		color: #979595;
	}
</style>